React useSyncExternalStore : Maîtriser la Synchronisation des Stores Externes

Dans les applications React modernes, la gestion efficace de l'état est cruciale. Bien que React fournisse des solutions de gestion d'état intégrées comme useState et useReducer, l'intégration avec des sources de données externes ou des bibliothèques de gestion d'état tierces nécessite une approche plus sophistiquée. C'est là que useSyncExternalStore entre en jeu.

Qu'est-ce que useSyncExternalStore ?

useSyncExternalStore est un hook React introduit dans React 18 qui vous permet de vous abonner et de lire des données depuis des sources externes d'une manière compatible avec le rendu concurrent. C'est particulièrement important lorsque l'on traite des données qui ne sont pas directement gérées par React, telles que :

• Bibliothèques de gestion d'état tierces : Redux, Zustand, Jotai, etc.
• APIs du navigateur : localStorage, IndexedDB, etc.
• Sources de données externes : Server-sent events, WebSockets, etc.

Avant useSyncExternalStore, la synchronisation des stores externes pouvait entraîner du "tearing" (déchirement) et des incohérences, en particulier avec les fonctionnalités de rendu concurrent de React. Ce hook résout ces problèmes en fournissant un moyen standardisé et performant de connecter des données externes à vos composants React.

Pourquoi utiliser useSyncExternalStore ? Bénéfices et Avantages

L'utilisation de useSyncExternalStore offre plusieurs avantages clés :

• Sécurité en Concurrence : Assure que votre composant affiche toujours une vue cohérente du store externe, même pendant les rendus concurrents. Cela prévient les problèmes de "tearing" où des parties de votre UI pourraient afficher des données incohérentes.
• Performance : Optimisé pour la performance, minimisant les re-renderings inutiles. Il s'appuie sur les mécanismes internes de React pour s'abonner efficacement aux changements et ne mettre à jour le composant que lorsque c'est nécessaire.
• API Standardisée : Fournit une API cohérente et prévisible pour interagir avec les stores externes, quelle que soit l'implémentation sous-jacente.
• Réduction du Code Répétitif : Simplifie le processus de connexion aux stores externes, réduisant la quantité de code personnalisé que vous devez écrire.
• Compatibilité : Fonctionne de manière transparente avec un large éventail de sources de données externes et de bibliothèques de gestion d'état.

Fonctionnement de useSyncExternalStore : Une Analyse Détaillée

Le hook useSyncExternalStore prend trois arguments :

1. subscribe(callback: () => void): () => void : Une fonction qui enregistre un callback pour être notifié lorsque le store externe change. Elle doit retourner une fonction pour se désabonner. C'est ainsi que React apprend quand le store a de nouvelles données.
2. getSnapshot(): T : Une fonction qui retourne un instantané (snapshot) des données du store externe. Cet instantané doit être une valeur simple et immuable que React peut utiliser pour déterminer si les données ont changé.
3. getServerSnapshot?(): T (Optionnel) : Une fonction qui retourne l'instantané initial des données sur le serveur. Ceci est utilisé pour le rendu côté serveur (SSR) afin d'assurer la cohérence entre le serveur et le client. Si elle n'est pas fournie, React utilisera getSnapshot() lors du rendu serveur, ce qui peut ne pas être idéal dans tous les scénarios.

Voici une description de la manière dont ces arguments fonctionnent ensemble :

1. Lorsque le composant est monté, useSyncExternalStore appelle la fonction subscribe pour enregistrer un callback.
2. Lorsque le store externe change, il invoque le callback enregistré via subscribe.
3. Le callback indique à React que le composant doit être re-rendu.
4. Pendant le rendu, useSyncExternalStore appelle getSnapshot pour obtenir les dernières données du store externe.
5. React compare l'instantané actuel avec le précédent. S'ils sont différents, le composant est mis à jour avec les nouvelles données.
6. Lorsque le composant est démonté, la fonction de désabonnement retournée par subscribe est appelée pour éviter les fuites de mémoire.

Exemple d'Implémentation de Base : Intégration avec localStorage

Illustrons comment utiliser useSyncExternalStore avec un exemple simple : lire et écrire une valeur dans localStorage.

            import { useSyncExternalStore } from 'react';

function getLocalStorageItem(key: string): string | null {
  try {
    return localStorage.getItem(key);
  } catch (error) {
    console.error("Error accessing localStorage:", error);
    return null; // Gérer les erreurs potentielles comme l'indisponibilité de `localStorage`.
  }
}

function useLocalStorage(key: string): [string | null, (value: string) => void] {
  const subscribe = (callback: () => void) => {
    window.addEventListener('storage', callback);
    return () => window.removeEventListener('storage', callback);
  };

  const getSnapshot = () => getLocalStorageItem(key);

  const serverSnapshot = () => null; // Ou une valeur par défaut si appropriée pour votre configuration SSR

  const value = useSyncExternalStore(subscribe, getSnapshot, serverSnapshot);

  const setValue = (newValue: string) => {
    try {
      localStorage.setItem(key, newValue);
      // Déclenche un événement de stockage sur la fenêtre actuelle pour provoquer les mises à jour dans les autres onglets.
      window.dispatchEvent(new StorageEvent('storage', {
        key: key,
        newValue: newValue,
        storageArea: localStorage,
      } as StorageEventInit));
    } catch (error) {
      console.error("Error setting localStorage:", error);
    }
  };

  return [value, setValue];
}

function MyComponent() {
  const [name, setName] = useLocalStorage('name');

  return (
    <div>
      <p>Bonjour, {name || 'le Monde'}</p>
      <input
        type="text"
        value={name || ''}
        onChange={(e) => setName(e.target.value)}
      />
    </div>
  );
}

export default MyComponent;
            

              
                Copy
              
            
          

Explication :

• getLocalStorageItem : Une fonction utilitaire pour récupérer en toute sécurité la valeur de localStorage, en gérant les erreurs potentielles.
• useLocalStorage : Un hook personnalisé qui encapsule la logique d'interaction avec localStorage en utilisant useSyncExternalStore.
• subscribe : Écoute l'événement 'storage', qui est déclenché lorsque localStorage est modifié dans un autre onglet ou une autre fenêtre. Fait crucial, nous déclenchons un événement de stockage après avoir défini une nouvelle valeur pour provoquer correctement les mises à jour dans la *même* fenêtre.
• getSnapshot : Retourne la valeur actuelle de localStorage.
• serverSnapshot : Retourne null (ou une valeur par défaut) pour le rendu côté serveur.
• setValue : Met à jour la valeur dans localStorage et déclenche un événement de stockage pour le signaler aux autres onglets.
• MyComponent : Un composant simple qui utilise le hook useLocalStorage pour afficher et mettre à jour un nom.

Considérations Importantes pour localStorage :

• Gestion des Erreurs : Entourez toujours l'accès à localStorage de blocs try...catch pour gérer les erreurs potentielles, comme lorsque localStorage est désactivé ou indisponible (par exemple, en mode de navigation privée).
• Événements de Stockage : L'événement 'storage' n'est déclenché que lorsque localStorage est modifié dans un *autre* onglet ou une autre fenêtre, pas dans la même fenêtre. Par conséquent, nous déclenchons manuellement un nouveau StorageEvent après avoir défini une valeur.
• Sérialisation des Données : localStorage ne stocke que des chaînes de caractères. Vous devrez peut-être sérialiser et désérialiser des structures de données complexes en utilisant JSON.stringify et JSON.parse.
• Sécurité : Soyez conscient des données que vous stockez dans localStorage, car elles sont accessibles au code JavaScript sur le même domaine. Les informations sensibles ne doivent pas être stockées dans localStorage.

Cas d'Usage Avancés et Exemples

1. Intégration avec Zustand (ou une autre bibliothèque de gestion d'état)

L'intégration de useSyncExternalStore avec une bibliothèque de gestion d'état globale comme Zustand est un cas d'usage courant. Voici un exemple :

            import { useSyncExternalStore } from 'react';
import { create } from 'zustand';

interface BearState {
  bears: number
  increase: (by: number) => void
}

const useStore = create<BearState>((set) => ({
  bears: 0,
  increase: (by) => set((state) => ({ bears: state.bears + by }))
}))

function BearCounter() {
  const bears = useSyncExternalStore(
    useStore.subscribe,
    useStore.getState,
    () => ({ bears: 0, increase: () => {} }) // Snapshot serveur, fournir un état par défaut
  ).bears
  return <h1>{bears} ours dans le coin !</h1>
}

function Controls() {
  const increase = useStore(state => state.increase)
  return (<button onClick={() => increase(1)}>un ours</button>)
}

export { BearCounter, Controls }
            

              
                Copy
              
            
          

Explication :

• Nous utilisons Zustand pour la gestion d'état globale.
• useStore.subscribe : Cette fonction s'abonne au store Zustand et déclenchera des re-renderings lorsque l'état du store change.
• useStore.getState : Cette fonction retourne l'état actuel du store Zustand.
• Le troisième paramètre fournit un état par défaut pour le rendu côté serveur (SSR), garantissant que le composant se rend correctement sur le serveur avant que le JavaScript côté client ne prenne le relais.
• Le composant obtient le nombre d'ours en utilisant useSyncExternalStore et l'affiche.
• Le composant Controls montre comment utiliser un setter de Zustand.

2. Intégration avec les Server-Sent Events (SSE)

useSyncExternalStore peut être utilisé pour mettre à jour efficacement les composants en fonction des données en temps réel d'un serveur utilisant les Server-Sent Events (SSE).

            import { useSyncExternalStore, useState, useEffect, useCallback } from 'react';

function useSSE(url: string) {
  const [data, setData] = useState(null);
  const [eventSource, setEventSource] = useState(null);

  useEffect(() => {
    const newEventSource = new EventSource(url);
    setEventSource(newEventSource);

    newEventSource.onmessage = (event) => {
      try {
        const parsedData = JSON.parse(event.data);
        setData(parsedData);
      } catch (error) {
        console.error("Error parsing SSE data:", error);
      }
    };

    newEventSource.onerror = (error) => {
      console.error("SSE error:", error);
    };

    return () => {
      newEventSource.close();
      setEventSource(null);
    };
  }, [url]);

  const subscribe = useCallback((callback: () => void) => {
    if (eventSource) {
      eventSource.addEventListener('message', callback);
    }
    return () => {
      if (eventSource) {
        eventSource.removeEventListener('message', callback);
      }
    };
  }, [eventSource]);

  const getSnapshot = useCallback(() => data, [data]);

  const serverSnapshot = useCallback(() => null, []);

  const value = useSyncExternalStore(subscribe, getSnapshot, serverSnapshot);

  return value;
}

function RealTimeDataComponent() {
  const realTimeData = useSSE('/api/sse'); // Remplacez par votre point de terminaison SSE

  if (!realTimeData) {
    return <p>Chargement...</p>;
  }

  return <div><p>Données en temps réel : {JSON.stringify(realTimeData)}</p></div>;
}

export default RealTimeDataComponent;
            

              
                Copy
              
            
          

Explication :

• useSSE : Un hook personnalisé qui établit une connexion SSE à une URL donnée.
• subscribe : Ajoute un écouteur d'événement à l'objet EventSource pour être notifié des nouveaux messages du serveur. Il utilise useCallback pour s'assurer que la fonction de callback n'est pas recréée à chaque rendu.
• getSnapshot : Retourne les données les plus récemment reçues du flux SSE.
• serverSnapshot : Retourne null pour le rendu côté serveur.
• RealTimeDataComponent : Un composant qui utilise le hook useSSE pour afficher des données en temps réel.

3. Intégration avec IndexedDB

Synchronisez les composants React avec des données stockées dans IndexedDB en utilisant useSyncExternalStore.

            import { useSyncExternalStore, useState, useEffect, useCallback } from 'react';

interface IDBData {
  id: number;
  name: string;
}

async function getAllData(): Promise {
  return new Promise((resolve, reject) => {
    const request = indexedDB.open('myDataBase', 1); // Remplacez par le nom et la version de votre base de données

    request.onerror = (event) => {
      console.error("IndexedDB open error:", event);
      reject(event);
    };

    request.onsuccess = (event) => {
      const db = (event.target as IDBRequest).result as IDBDatabase;
      const transaction = db.transaction(['myDataStore'], 'readonly'); // Remplacez par le nom de votre store
      const objectStore = transaction.objectStore('myDataStore');
      const getAllRequest = objectStore.getAll();

      getAllRequest.onsuccess = (event) => {
        const data = (event.target as IDBRequest).result as IDBData[];
        resolve(data);
      };

      getAllRequest.onerror = (event) => {
        console.error("IndexedDB getAll error:", event);
        reject(event);
      };
    };

    request.onupgradeneeded = (event) => {
      const db = (event.target as IDBRequest).result as IDBDatabase;
      db.createObjectStore('myDataStore', { keyPath: 'id' });
    };
  });
}

function useIndexedDBData(): IDBData[] | null {
  const [data, setData] = useState(null);
  const [dbInitialized, setDbInitialized] = useState(false);

  useEffect(() => {
    const initDB = async () => {
        try{
            await getAllData();
            setDbInitialized(true);
        } catch (e) {
            console.error("IndexedDB initialization failed", e);
        }
    }

    initDB();
  }, []);


  const subscribe = useCallback((callback: () => void) => {
    // Appliquer un debounce au callback pour éviter les re-renderings excessifs.
    let timeoutId: NodeJS.Timeout;
    const debouncedCallback = () => {
      clearTimeout(timeoutId);
      timeoutId = setTimeout(callback, 50); // Ajustez le délai du debounce selon les besoins
    };

    const handleVisibilityChange = () => {
      // Re-récupérer les données lorsque l'onglet redevient visible
      if (document.visibilityState === 'visible') {
        debouncedCallback();
      }
    };

    window.addEventListener('focus', debouncedCallback);
    document.addEventListener('visibilitychange', handleVisibilityChange);


    return () => {
      window.removeEventListener('focus', debouncedCallback);
      document.removeEventListener('visibilitychange', handleVisibilityChange);
      clearTimeout(timeoutId);
    };
  }, []);

  const getSnapshot = useCallback(() => {
    // Récupérer les données les plus récentes d'IndexedDB à chaque appel de getSnapshot
    getAllData().then(newData => setData(newData));
    return data;
  }, [data]);

  const serverSnapshot = useCallback(() => null, []);

  return useSyncExternalStore(subscribe, getSnapshot, serverSnapshot);
}

function IndexedDBComponent() {
  const data = useIndexedDBData();

  if (!data) {
    return <p>Chargement des données depuis IndexedDB...</p>;
  }

  return (
    <div>
      <h2>Données depuis IndexedDB :</h2>
      <ul>
        {data.map((item) => (
          <li key={item.id}>{item.name} (ID: {item.id})</li>
        ))}
      </ul>
    </div>
  );
}

export default IndexedDBComponent;
            

              
                Copy
              
            
          

Explication :

• getAllData : Une fonction asynchrone qui récupère toutes les données du store IndexedDB.
• useIndexedDBData : Un hook personnalisé qui utilise useSyncExternalStore pour s'abonner aux changements dans IndexedDB.
• subscribe : Met en place des écouteurs pour les changements de visibilité et de focus afin de mettre à jour les données depuis IndexedDB et utilise une fonction de debounce pour éviter les mises à jour excessives.
• getSnapshot : Récupère l'instantané actuel en appelant `getAllData()` puis en retournant les `data` de l'état.
• serverSnapshot : Retourne null pour le rendu côté serveur.
• IndexedDBComponent : Un composant qui affiche les données provenant d'IndexedDB.

Considérations Importantes pour IndexedDB :

• Opérations Asynchrones : Les interactions avec IndexedDB sont asynchrones, vous devez donc gérer attentivement la nature asynchrone de la récupération et des mises à jour des données.
• Gestion des Erreurs : Implémentez une gestion robuste des erreurs pour gérer gracieusement les problèmes potentiels d'accès à la base de données, tels que la base de données non trouvée ou les erreurs de permission.
• Versionnement de la Base de Données : Gérez attentivement les versions de la base de données en utilisant l'événement onupgradeneeded pour assurer la compatibilité des données à mesure que votre application évolue.
• Performance : Les opérations IndexedDB peuvent être relativement lentes, en particulier pour les grands ensembles de données. Optimisez les requêtes et l'indexation pour améliorer les performances.

Considérations sur la Performance

Bien que useSyncExternalStore soit optimisé pour la performance, il y a encore quelques considérations à garder à l'esprit :

• Minimiser les Changements de Snapshot : Assurez-vous que la fonction getSnapshot ne retourne un nouvel instantané que lorsque les données ont réellement changé. Évitez de créer inutilement de nouveaux objets ou tableaux. Envisagez d'utiliser des techniques de mémoïsation pour optimiser la création de snapshots.
• Mises à Jour par Lots : Si possible, regroupez les mises à jour du store externe pour réduire le nombre de re-renderings. Par exemple, si vous mettez à jour plusieurs propriétés dans le store, essayez de toutes les mettre à jour en une seule transaction.
• Debouncing/Throttling : Si le store externe change fréquemment, envisagez d'appliquer un debounce ou un throttle aux mises à jour du composant React. Cela peut éviter les re-renderings excessifs et améliorer les performances. C'est particulièrement utile avec des stores volatiles comme le redimensionnement de la fenêtre du navigateur.
• Comparaison Superficielle : Assurez-vous de retourner des valeurs primitives ou des objets immuables dans getSnapshot afin que React puisse déterminer rapidement si les données ont changé en utilisant une comparaison superficielle (shallow comparison).
• Mises à Jour Conditionnelles : Dans les cas où le store externe change fréquemment mais que votre composant ne doit réagir qu'à certains changements, envisagez d'implémenter des mises à jour conditionnelles dans la fonction `subscribe` pour éviter les re-renderings inutiles.

Pièges Courants et Dépannage

• Problèmes de Tearing : Si vous rencontrez toujours des problèmes de "tearing" après avoir utilisé useSyncExternalStore, vérifiez que votre fonction getSnapshot retourne une vue cohérente des données et que la fonction subscribe notifie correctement React des changements. Assurez-vous de ne pas muter les données directement dans la fonction getSnapshot.
• Boucles Infinies : Une boucle infinie peut se produire si la fonction getSnapshot retourne toujours une nouvelle valeur, même lorsque les données n'ont pas changé. Cela peut arriver si vous créez inutilement de nouveaux objets ou tableaux. Assurez-vous de retourner la même valeur si les données n'ont pas changé.
• Rendu Côté Serveur Manquant : Si vous utilisez le rendu côté serveur, assurez-vous de fournir une fonction getServerSnapshot pour garantir que le composant se rend correctement sur le serveur. Cette fonction doit retourner l'état initial du store externe.
• Désabonnement Incorrect : Assurez-vous toujours de vous désabonner correctement du store externe dans la fonction retournée par subscribe. Ne pas le faire peut entraîner des fuites de mémoire.
• Utilisation Incorrecte avec le Mode Concurrent : Assurez-vous que votre store externe est compatible avec le Mode Concurrent. Évitez de faire des mutations sur le store externe pendant que React effectue un rendu. Les mutations doivent être synchrones et prévisibles.

Conclusion

useSyncExternalStore est un outil puissant pour synchroniser les composants React avec des stores de données externes. En comprenant son fonctionnement et en suivant les meilleures pratiques, vous pouvez vous assurer que vos composants affichent des données cohérentes et à jour, même dans des scénarios de rendu concurrent complexes. Ce hook simplifie l'intégration avec diverses sources de données, des bibliothèques de gestion d'état tierces aux APIs du navigateur et aux flux de données en temps réel, conduisant à des applications React plus robustes et performantes. N'oubliez pas de toujours gérer les erreurs potentielles, d'optimiser les performances et de gérer attentivement les abonnements pour éviter les pièges courants.